<template>
  <div class="falls">
    <div class="falls-column">
      <van-list
        v-model="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="onLoad"
      >
        <div class="m-block" v-for="(item,index) in fallsList1" :key="index">
          <div class="m-blocks">
            <a class="m-intro" :href="src + item.schemeUrl">
              <div class="m-innerIntro">
                <div class="m-imgBox">
                  <img
                    :src="item.picUrl"
                    alt=""
                    class="m-image"
                    style="width: 172.5px"
                  />
                </div>
              </div>
            </a>
            <a :href="src + item.schemeUrl" class="m-Desc">{{ item.title }}</a>
            <div class="m-empty"></div>
            <div class="m-detail">
              <div class="m-user">
                <img
                  :src="!item.avatar ? item.lookList[0].avatar : item.avatar"
                  alt=""
                  class="user-img"
                />
                <div class="user-name">
                  {{
                    !item.nickname ? item.lookList[0].nickname : item.nickname
                  }}
                </div>
              </div>
              <div class="m-area">
                <img
                  src="https://yanxuan.nosdn.127.net/5097bc5f2e1eb15f2a32b56895db073a.png"
                  alt=""
                  class="area-img"
                />
                <div class="area-text">{{ item.readCount }}</div>
              </div>
            </div>
            <div class="m-single" v-if="item.buyNow">
              <div class="m-singleBox">
                <div class="m-name">{{ item.buyNow.itemName }}</div>
                <div class="m-buy">
                  <span class="m-buyText">去购买</span>
                  <img
                    src="https://yanxuan.nosdn.127.net/3a49ed1a8ddf51c2a2a9e67736871e18.png"
                    alt=""
                    class="m-arrow"
                  />
                </div>
              </div>
            </div>
          </div>
        </div>
      </van-list>
    </div>
    <div class="falls-column">
      <van-list
        v-model="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="onLoad"
      >
        <div class="m-block" v-for="(item,index) in fallsList2" :key="index">
          <div class="m-blocks">
            <a :href="src + item.schemeUrl" class="m-intro">
              <div class="m-innerIntro">
                <div class="m-imgBox">
                  <img
                    :src="item.picUrl"
                    alt=""
                    class="m-image"
                    style="width: 172.5px; height: 96px"
                  />
                </div>
              </div>
            </a>
            <a :href="src + item.schemeUrl" class="m-Desc">{{ item.title }}</a>
            <div class="m-empty"></div>
            <div class="m-detail">
              <div class="m-user">
                <img :src="item.avatar" alt="" class="user-img" />
                <div class="user-name">{{ item.nickname }}</div>
              </div>
              <div class="m-area">
                <img
                  src="https://yanxuan.nosdn.127.net/5097bc5f2e1eb15f2a32b56895db073a.png"
                  alt=""
                  class="area-img"
                />
                <div class="area-text">343K</div>
              </div>
            </div>
            <div class="m-single" v-if="item.buyNow">
              <div class="m-singleBox">
                <div class="m-name">{{ item.buyNow.itemName }}</div>
                <div class="m-buy">
                  <span class="m-buyText">去购买</span>
                  <img
                    src="https://yanxuan.nosdn.127.net/3a49ed1a8ddf51c2a2a9e67736871e18.png"
                    alt=""
                    class="m-arrow"
                  />
                </div>
              </div>
            </div>
          </div>
        </div>
      </van-list>
    </div>
    
  </div>
</template>

<script>
export default {
  data() {
    return {
      fallsList1: [],
      fallsList2: [],
      loading: false,
      finished: false,
      src: "https://m.you.163.com",
      num: 1,
    };
  },

  methods: {
    onLoad() {
        for (let i = 1; i < 20; i++) {
          this.num++;
          console.log(this.num);
        }
        this.queryData()
        // 加载状态结束
        console.log(this.fallsList1);
        this.loading = false;

    },
    async queryData() {
      let value = await fetch(
        "/wangyi/topic/v1/find/recAuto.json?page+this.num&size=2&exceptIds="
      ).then((response) => response.json());
      value = value.data.result;
      this.fallsList1.push(...value[0].topics);
      this.fallsList2.push(...value[1].topics);
    },
  },
  
  computed: {
    // 计算浏览次数
    readCountList() {
      let ary = this.fallsList1;
      let browse = [];
      for (let i = 0; i < ary.length; i++) {
        if (ary[i].readCount < 999) {
          browse = ary[i].readCount.split(length - 3, 3) + "K";
          return browse;
        }
      }
    },
  },
  created() {
    this.queryData()
    // this.queryFallsData();
  },
 
};
</script>

<style lang="less" scoped>
.falls {
  width: 472.15px;
  margin: 0 auto;
  margin-top: 19.95px;
  box-sizing: border-box;
  display: flex;
  justify-content: space-between;
  flex-direction: row;

  .falls-column {
    width: 229.425px;
    align-items: center;
    flex-direction: row;
    .m-block {
      width: 229.425px;
      margin-bottom: 13.33px;
      border-radius: 10.64px;
      align-items: center;
      overflow: hidden;
      box-sizing: border-box;
      .m-blocks {
        width: 229.425px;
        box-sizing: border-box;
        border-radius: 10.64px;
        align-items: center;
        overflow: hidden;
        .m-intro {
          display: block;
          width: 229.425px;
          border-radius: 10.64px;
          align-items: center;
          overflow: hidden;
          box-sizing: border-box;
          .m-innerIntro {
            width: 229.425px;
            border-radius: 10.64px;
            align-items: center;
            overflow: hidden;
            box-sizing: border-box;
            .m-imgBox {
              width: 229.425px;
            }
          }
        }
      }
      .m-Desc,
      .m-detail {
        width: 228.095px;
        flex-direction: row;
        background: #fff;
      }
      .m-Desc {
        display: block;
        width: 228.095px;
        color: #333;
        padding: 11.97px 10.64px 0;
        font-size: 18.62px;
        box-sizing: border-box;
      }
      .m-empty {
        width: 228.095px;
        height: 11.305px;
        background: #fff;
      }
      .m-detail {
        font-size: 15.96px;
        padding: 11.97px 10.64px 15.96px;
        display: flex;
        justify-content: space-between;
        box-sizing: border-box;
        .m-user {
          display: flex;
          flex-direction: row;
          justify-content: right;
          .user-img {
            width: 31.92px;
            height: 31.92px;
            border-radius: 50%;
            border: 1.33px solid #d9d9d9;
            box-sizing: border-box;
          }
          .user-name {
            overflow: hidden;
            text-overflow: ellipsis;
            font-size: 15.96px;
            white-space: nowrap;
            color: #7f7f7f;
            height: 31.92px;
            line-height: 31.92px;
            margin-left: 5.32px;
          }
        }
        .m-area {
          width: 66.5px;
          display: flex;
          flex-direction: row;
          justify-content: flex-end;
          align-items: center;
          .area-img {
            width: 21.28px;
            height: 21.28px;
          }
          .area-text {
            font-size: 15.96px;
            color: #7f7f7f;
            text-align: right;
            height: 21.28px;
            line-height: 21.28px;
            margin-left: 1.33px;
          }
        }
      }
      .m-single {
        width: 228.095px;
        background: #fff;
        box-sizing: border-box;
        font-family: PingFangSC-Light;
        .m-singleBox {
          width: 152.5px;
          border-top: 0.665px solid #d9d9d9;
          margin: 0 auto;
          padding: 13.33px 0;
          .m-name {
            width: 103.5px;
            display: inline-block;
            height: 21.28px;
            line-height: 21.28px;
            color: #333;
            vertical-align: middle;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            font-size: 15.96px;
          }
          .m-buy {
            width: 58.52px;
            height: 21.28px;
            display: inline-block;
            vertical-align: middle;
            text-align: right;
            position: relative;
            right: -6.65px;
            .m-buyText {
              height: 21.28px;
              line-height: 21.28px;
              color: #dd1a21;
              display: inline-block;
              vertical-align: top;
              font-size: 15.96px;
            }
            .m-arrow {
              width: 6.65px;
              height: 11.97px;
              line-height: 11.97px;
              display: inline-block;
              vertical-align: baseline;
              position: relative;
              top: -2.66px;
              margin-left: 2.66px;
            }
          }
        }
      }
    }
  }
}
</style>